<template>
  <div class="app-container home">
    <div class="metric-cards">
      <div class="metric-card">
        <div class="metric-left">
          <span class="metric-name">活跃用户</span>
          <span class="metric-value">5,653</span>
        </div>
        <div class="metric-right">
          <span class="metric-change positive">+22.42%</span>
          <div id="mini-chart-1" style="width: 100px; height: 50px"></div>
        </div>
      </div>
      <div class="metric-card">
        <div class="metric-left">
          <span class="metric-name">新用户</span>
          <span class="metric-value">1,650</span>
        </div>
        <div class="metric-right">
          <span class="metric-change positive">+15.44%</span>
          <div id="mini-chart-2" style="width: 100px; height: 50px"></div>
        </div>
      </div>
      <div class="metric-card">
        <div class="metric-left">
          <span class="metric-name">总访问量</span>
          <span class="metric-value">5,420</span>
        </div>
        <div class="metric-right">
          <span class="metric-change negative">-10.24%</span>
          <div id="mini-chart-3" style="width: 100px; height: 50px"></div>
        </div>
      </div>
    </div>
      <!-- ECharts 图表区 -->
      <div class="echarts-charts">
            <div class="echart-card">
                <div id="bar-chart" style="width: 100%; height: 300px;"></div>
            </div>
            <div class="echart-card">
                <div id="pie-chart" style="width: 100%; height: 300px;"></div>
            </div>
            <div class="echart-card">
                <div id="line-chart" style="width: 100%; height: 300px;"></div>
            </div>
            <div class="echart-card">
                <div id="horizontal-bar-chart" style="width: 100%; height: 300px;"></div>
            </div>
        </div>
  </div>
</template>

<script setup name="ViewIndex">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const { proxy } = getCurrentInstance();

const data = reactive({
  // 版本号
  version: "3.3.0",
});
const { version } = toRefs(data);
// onMounted(() => {
//   onCreated();
// });

// function onCreated() {
//   proxy.$notify({
//     title: "用户您好",
//     dangerouslyUseHTMLString: true,
//     duration: 0,
//     position: "bottom-right",
//     message: "",
//   });
// }

// function goTarget(href) {
//   window.open(href, "_blank");
// }

// 初始化 ECharts 图表
const initCharts = () => {
  const barChart = echarts.init(document.getElementById('bar-chart'));
  const barOption = {
    xAxis: {
      type: 'category',
      data: ['5月4日', '5月5日', '5月6日', '5月7日'],
      axisLabel: {
        rotate: 45,
      },
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [120, 200, 150, 80],
        type: 'bar',
        label: {
          show: true,
          position: 'top',
          formatter: (params) => `${params.value}%`,
        },
      },
    ],
  };
  barChart.setOption(barOption);

  const pieChart = echarts.init(document.getElementById('pie-chart'));
  const pieOption = {
    series: [
      {
        type: 'pie',
        radius: '50%',
        data: [
          { value: 335, name: '0 - 18岁' },
          { value: 310, name: '19 - 30岁' },
          { value: 234, name: '30 - 40岁' },
          { value: 135, name: '其他' },
        ],
      },
    ],
  };
  pieChart.setOption(pieOption);

  const lineChart = echarts.init(document.getElementById('line-chart'));
  const lineOption = {
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
      },
    ],
  };
  lineChart.setOption(lineOption);

  const horizontalBarChart = echarts.init(document.getElementById('horizontal-bar-chart'));
  const horizontalBarOption = {
    xAxis: {
      type: 'value',
    },
    yAxis: {
      type: 'category',
      data: ['Facebook', 'Instagram', 'Twitter'],
    },
    series: [
      {
        data: [120, 200, 150],
        type: 'bar',
      },
    ],
  };
  horizontalBarChart.setOption(horizontalBarOption);
};
onMounted(() => {
  initCharts();
});
</script>

<style lang="scss" scoped>
/* 指标卡片区 */
.metric-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
  margin-top: 20px;
  padding: 0 10px;
}

.metric-card {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 20px;
  flex: 1;
  min-width: 200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: box-shadow 0.3s;
}

.metric-card:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.metric-left {
  display: flex;
  flex-direction: column;
}

.metric-name {
  font-size: 16px;
  color: #666666;
}

.metric-value {
  font-size: 24px;
  font-weight: bold;
  color: #000000;
}

.metric-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.metric-change {
  font-size: 16px;
}

.metric-change.positive {
  color: #4caf50;
}

.metric-change.negative {
  color: #f44336;
}
/* ECharts 图表区 */
.echarts-charts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.echart-card {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .metric-card {
    min-width: 150px;
  }
}

@media (max-width: 768px) {
  nav {
    display: none;
  }

  .metric-cards {
    flex-direction: column;
  }

  .echarts-charts {
    grid-template-columns: 1fr;
  }
}
</style>
